<template>
  <div class="app-container">
    <!-- 上传class的excel -->
    <el-upload
      ref="upload"
      accept=".xls,.xlsx"
      action="http://localhost:8081/uploadClass"
      :on-remove="handleRemove"
      :on-error="handleError"
      :on-success="uploadSuccess"
      :disabled="importBtnDisabled"
      :file-list="fileList"
      :auto-upload="false"
      :limit="1"
    >
      <el-button
        style="margin-left: 10px"
        slot="trigger"
        size="small"
        type="primary"
        >从Excel导入<i class="el-icon-upload2 el-icon--right"></i
      ></el-button>
      <el-button
        style="margin-left: 10px"
        size="small"
        type="success"
        :loading="loading"
        @click="submitUpload"
        >上传到服务器<i class="el-icon-upload el-icon--right"></i
      ></el-button>
      
      <el-button
        class="add-button"
        size="small"
        type="primary"
        @click="downloadTemplate()"
      >
        下载模板
        <i class="el-icon-download el-icon--right"></i>
      </el-button>
      <div slot="tip" class="el-upload__tip" style="height: 30px;">
        只能上传xls/xlsx文件,导入新任务后将清空原来的任务,请一次性将本学期班级导入完毕
      </div>
    </el-upload>
    

    <!-- 展示上传后的结果 -->
    <el-table
      v-loading="listLoading"
      :data="
        list
          .filter((data) => true)
          .slice((currentPage - 1) * pagesize, currentPage * pagesize)
      "
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="40px">
        <template slot-scope="scope">
          {{ scope.$index + 1 + (currentPage - 1) * pagesize }}
        </template>
      </el-table-column>
      
      <el-table-column label="班级编号" prop="classNo" align="center">
        <template slot-scope="scope">
          {{ scope.row.classNo }}
        </template>
      </el-table-column>
      <el-table-column label="班级名" prop="className" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.className }}</span>
        </template>
      </el-table-column>
      <el-table-column label="班级人数" prop="size" align="center">
        <template slot-scope="scope">
          {{ scope.row.size }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 1rem; margin-left: 0.4rem"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="list.filter((data) => true).length"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        2: "success",
        0: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      list: null,
      listLoading: true,
      search: "",
      currentPage: 1,
      currentIndex: "",
      pagesize: 10,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      this.$axios
        .get("/classes/getList", {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          this.list = res.data.data;
          if (this.list.length == 0) {
            this.$message({ message: "暂无班级", type: "success" });
          }
          this.listLoading = false;
        });
    },
    // 下载模板
    downloadTemplate() {
      window.location.href = "http://localhost:8081/downloadClass";
    },
    // 上传成功
    uploadSuccess(response, file, fileList) {
      this.loading = false;
      this.getList();
      // this.$message({ message: "上传成功", type: "success" });
    },
    handleRemove(file, fileList) {},
    handleError(error, file, fileList) {
      alert("文件上传失败" + error);
    },
    // 提交上传文件事件
    submitUpload() {
      this.loading = true;
      this.$refs.upload.submit();
    },

    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>
